<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="70px" style="background-color: #386582">
            <h1 style="color: white;
            font-size: 30px;margin: 0;line-height: 70px">烘焙坊后台管理系统
                <span style="float: right;font-size: 20px">
                    欢迎{{user.nickName}}回来!
                    <a href="javascript:void(0)" @click="logout()" style="color: orange">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="currentIndex"
                         @select="handleSelect" active-text-color="orange">
                    <img src="imgs/icon.png" width="150">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-user">用户管理</i></el-menu-item>
                    <el-menu-item index="2"><i class="el-icon-picture">轮播图</i></el-menu-item>
                    <el-menu-item index="3"><i class="el-icon-s-order">烘焙食谱</i></el-menu-item>
                    <el-menu-item index="4"><i class="el-icon-video-camera">烘焙视频</i></el-menu-item>
                    <el-menu-item index="5"><i class="el-icon-info">行业资讯</i></el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!--用户表格开始-->
                <el-table v-if="currentIndex==1" :data="userArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="userName" label="用户名"></el-table-column>
                    <el-table-column prop="nickName" label="昵称"></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <el-avatar :src="scope.row.imgUrl"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column label="管理员">
                        <template slot-scope="scope">
                            <!--@change 值改变事件-->
                            <el-switch :disabled="user.id==scope.row.id" @change="change(scope.row)" v-model="scope.row.isAdmin"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="user.id==scope.row.id" type="danger" @click="deleteUser(scope.$index,scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--用户表格结束-->
                <!--轮播图表格开始-->
                <el-table v-if="currentIndex==2" :data="bannerArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="200">
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="bannerDelete(scope.$index,scope.row)" type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--轮播图表格结束-->
                <!--内容表格开始-->
                <el-table v-if="currentIndex>2" :data="contentArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column label="封面" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="60px">
                        </template>
                    </el-table-column>
                    <el-table-column v-if="currentIndex!=4" prop="brief" label="摘要" width="300px"></el-table-column>
                    <el-table-column prop="categoryName" label="分类" width="80px"></el-table-column>
                    <el-table-column prop="viewCount" label="浏览量" width="50px"></el-table-column>
                    <el-table-column prop="commentCount" label="回复量" width="50px"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" @click="contentEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
                            <el-button type="danger" @click="contentDelete(scope.$index,scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--内容表格结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"1",
                userArr:[
        {
            "id": 17,
            "userName": "jerry",
            "nickName": "杰瑞",
            "imgUrl": "imgs/1.jpg",
            "isAdmin": false,
            "createTime": "2023/05/11 20:40:44"
        },
        {
            "id": 12,
            "userName": "tom",
            "nickName": "汤姆",
            "imgUrl": "imgs/b9c21937-d7f8-4843-8f53-7eb9d979829a.jpg",
            "isAdmin": true,
            "createTime": "2023/04/31 00:43:52"
        },
        {
            "id": 13,
            "userName": "ldh",
            "nickName": "刘德华",
            "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
            "isAdmin": false,
            "createTime": "2023/03/25 15:03:08"
        },
        {
            "id": 13,
            "userName": "gfc",
            "nickName": "郭富城",
            "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
            "isAdmin": false,
            "createTime": "2023/03/20 15:03:08"
        },
        {
            "id": 13,
            "userName": "lm",
            "nickName": "黎明",
            "imgUrl": "imgs/b8401cd3-4dd1-4a8d-94c7-e61388ed5423.gif",
            "isAdmin": false,
            "createTime": "2023/02/25 15:03:08"
        }],
                bannerArr:[{
            "id": 1,
            "imgUrl": "./imgs/banner1.jpg",
            "createTime": "2023/02/08"
        },
        {
            "id": 2,
            "imgUrl": "./imgs/banner2.jpg",
            "createTime": "2023/02/08"
        },
        {
            "id": 3,
            "imgUrl": "./imgs/banner3.jpg",
            "createTime": "2023/02/08"
        }],
                contentArr:[{
            "id": 11,
            "title": "入口即酥的超浓花生酱酥饼a",
            "imgUrl": "imgs/0237dcfc-9f6a-47cd-b45e-59a5897f2992.jpg",
            "brief": "花生酱+花生油=超浓郁花生香\n没有糖粉，用了白砂糖\n本是入口即酥\n却又在酥后留下些许颗粒感\n花生浓香",
            "categoryName": "家常菜",
            "viewCount": 8,
            "commentCount": 0,
            "createTime": "2023/03/27"
        },
        {
            "id": 12,
            "title": "枣泥花式面包,好吃到爆",
            "imgUrl": "imgs/58fb9623-c229-4b52-9a99-a4ebb9045675.jpg",
            "brief": "之前做了枣泥馅，配上花式面包，好吃到爆。\n \n枣泥花式面包的用料\n肉松面包面团 见肉松面包配方，枣泥",
            "categoryName": "面包",
            "viewCount": 1,
            "commentCount": 0,
            "createTime": "2023/03/28"
        },
        {
            "id": 13,
            "title": "酥脆培根吐司芝士卷，人见人爱",
            "imgUrl": "imgs/79b0dd4c-8bb8-43d8-b820-390307ae6e16.jpg",
            "brief": "人见人爱的培根平时一般都是放吐司里面做三文治吃今天培根要露脸啦哈哈哈哈简单快手酥脆可口的培根吐司芝士",
            "categoryName": "家常菜",
            "viewCount": 1,
            "commentCount": 0,
            "createTime": "2023/03/28"
        },
        {
            "id": 14,
            "title": "开放式三明治,一份小清新快手早餐",
            "imgUrl": "imgs/7fe42b87-cd9c-41a8-bd59-5b726f462bc7.png",
            "brief": "\n昨夜下了很怕人的骤雨，清晨办公桌上的薄荷微微抖动它的叶子。一份小清新快手早餐，让生活简洁不简单。\n",
            "categoryName": "小食",
            "viewCount": 1,
            "commentCount": 0,
            "createTime": "2023/03/28"
        },
        {
            "id": 15,
            "title": "核桃葡萄干软欧：蔓越莓种面",
            "imgUrl": "imgs/a168704d-bfcc-4a0f-9079-d15d98087662.jpg",
            "brief": "干，来款核桃葡萄干软欧吧！核桃是个宝，好处太多，不一一列举啦！\n \n蔓越莓种面的用料\n主面团， 蔓越",
            "categoryName": "面包",
            "viewCount": 2,
            "commentCount": 0,
            "createTime": "2023/03/28"
        },
        {
            "id": 16,
            "title": "蔓越莓绿豆糕，味道还不错值得一试!",
            "imgUrl": "imgs/b393a19f-d2cb-41ff-b395-a4e08538c210.jpg",
            "brief": "全家都很喜欢吃绿豆糕，但楼下甜品店的绿豆糕太甜了，那就自己动手做吧。之前尝试过带皮绿豆，颜色做出来没",
            "categoryName": "面包",
            "viewCount": 4,
            "commentCount": 0,
            "createTime": "2023/03/28"
        },
        {
            "id": 17,
            "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
            "imgUrl": "imgs/15fcffb1-3ef5-41dc-87d4-514469e10bdd.jpg",
            "brief": "椰蓉的香味 任谁都抗拒不了吧正好还有半个红心火龙果做成了***嫩的小爱心面包可爱又好吃可以做9个。\n",
            "categoryName": "小食",
            "viewCount": 15,
            "commentCount": 1,
            "createTime": "2023/03/28"
        },
        {
            "id": 18,
            "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
            "imgUrl": "imgs/3daca90c-a075-48bb-bead-5f89bbdd42f8.jpg",
            "brief": "爆浆抹茶甜甜圈面包好吃的起飞的爆浆抹茶甜甜圈，从里到外被抹茶包裹着，自带幸福感的小甜甜，抹茶控们完全",
            "categoryName": "家常菜",
            "viewCount": 18,
            "commentCount": 1,
            "createTime": "2023/03/28"
        }],
                user:{nickName:'汤姆'}
            }
        },
        methods: {
            contentEdit(i,c){
                let type = v.currentIndex-2;
                location.href = "./postArticle.html?type="+type+"&id="+c.id;
            },
            contentDelete(i,c){
                if (confirm("您确认删除此文章吗?")){
                    axios.post("/v1/contents/"+c.id+"/delete").then(function (response) {
                        if (response.data.code==1){
                            v.contentArr.splice(i,1);
                        }
                    })
                }
            },
            bannerDelete(i,b){
                if (confirm("您确认删除此轮播图吗?")){
                    axios.post("/v1/banners/"+b.id+"/delete").then(function (response) {
                        if (response.data.code==1){
                            v.bannerArr.splice(i,1);
                        }
                    })
                }
            },
            logout() {
                if (confirm("您确定退出登录吗?")) {
                    axios.get("/v1/users/logout").then(function () {
                        localStorage.clear();
                        location.href = "/";
                    })
                }
            },
            change(user){
                if (user.id==v.user.id&&!user.isAdmin){
                    v.$message.error("不能取消自己的管理员状态!");
                    user.isAdmin=true;
                    return;
                }

                //发请求修改用户的管理员状态
                axios.post("/v1/users/"+user.id+"/"+(user.isAdmin?1:0)+"/change")
                            .then(function (response) {
                    if (response.data.code==1){
                        if (user.isAdmin){
                            v.$message.success("设置为管理员!");
                        }else{
                            v.$message.success("取消管理员!");
                        }
                    }
                })
            },
            handleSelect(key,keyPath){
                location.href = "./admin.html?key="+key;
            },
            deleteUser(i,user){
                //判断删除的用户是否是当前登录的用户
                if (v.user.id==user.id){
                    v.$message.error("不能删除自己!");
                    return;
                }
                if (confirm("您确定要删除"+user.nickName+"吗?")){
                    //发出删除请求
                    axios.post("/v1/users/"+user.id+"/delete").then(function (response) {
                        if (response.data.code==1){
                            v.userArr.splice(i,1);
                        }
                    })
                }

            }
        },
        created:function () {
            if (location.search.includes("key")){
                let key = new URLSearchParams(location.search).get("key");
                this.currentIndex = key;
                if (key>2){
                    let type = key-2;
                    axios.get("/v1/contents/"+type+"/admin").then(function (response) {
                        if (response.data.code==1){
                            v.contentArr = response.data.data;
                        }
                    })
                }
            }



            //请求所有用户信息
            axios.get("/v1/users/").then(function (response) {
                if (response.data.code==1){
                    v.userArr = response.data.data;
                }else{
                    alert("无权访问!");
                    location.href="/";
                }
            })

            //发请求获取轮播图数据
            axios.get("/v1/banners/admin").then(function (response) {
                if (response.data.code==1){
                    v.bannerArr = response.data.data;
                }
            })
        }
    })
</script>
</html>